Створення web-сторінок з використанням фреймів, навігаційних панелей, та таблиць стилів(CSS).
Теоретичні відомості.
Фрейми.
Поняття про фрейми. Якщо матеріали web-сайту структуризовані логічно за темами і мають базуватися на де кількох сторінках з навігацією за допомогою гіперпосилань, то такий сайт реалізовують із застосуванням фреймів. Фрейм у перекладі з англійської означає кадр, рамка, прямокутна об ласть. Фрейми поділяють вікно броузера на частини, в яких відображають зміст сторінок сайту. Кожній сторінці має відповідати свій html-файл. Кожна сторінка повинна мати логіч ний заголовок.
Наприклад, типовим є сайт, де вікно броузера поділене на дві вертикальні області. У вужчій (до 25% від ширини вік на броузера) лівій області відображають зміст сайту у вигляді гіперпосилань на конкретні сторінки, а в іншій - вибрану ко ристувачем сторінку. Такий підхід до конструювання сайту дає змогу постійно бачити зміст сайту і переглядати його сторінки у будь-якій послідовності. Зміст чи у цьому випадку увесь лі вий фрейм називають навігаційною панеллю. Навігаційну па нель можна створити у верхній частині вікна броузера, справа чи де завгодно. Часто у верхній частині створюють третій вузь кий фрейм, де розташовують заголовок сайту, логотип фірми, рекламу, елементи WordArt, ActiveX чи Flash тощо.
Важливо на етапі конструювання сайту заздалегідь про думати фреймову структуру, визначитися з кількістю фрей мів, їхніми розмірами, розташуванням і стартовим виглядом.
Файлова структура сайту з фреймами. Для створення сайту із застосуванням фреймів потрібно скласти як мінімум три html-файли: один основний і два чи більше допоміжні. Один допоміжний файл потрібний для заповнення стартовою інформацією лівого фрейму, інший - правого. Основний файл призначений для опису розташування фреймів у вікні бро узера. Тут описується структура фреймів, зазначаються ад реси html-файлів для кожного фрейму, а також пояснюється, що має відображатися на екрані, якщо якийсь давній броузер не підтримує фреймів.
Основний html-файл. Оскільки основний файл запус кає сайт, то його прийнято називати index.html.
Приклад 1. Розглянемо типовий вигляд основного файла:
<HTML>
<HEAD>
<ТІТLЕ>Це мій сайт з фреймами </TITLE>
</HEAD>
<FRAMESET COLS="25% ,75% ">
<FRAME SRC"leftframe.html"
NAME= "left"
<!--або "лівий" або інша назва фрейму->
SCROLLING="no"
<!-або "yes" або "auto"-->
FRAMEBORDER="1"
<!--або "О" межа фреймів є чи ні-->
BORDER = "15" <!--товщина межі-->
MARGINHIGHT= "10"
'<!-- відступи від країв-->
MARGINWIDTH="10"
NORESIZE
<!—не можна пересувати межу-->
BORDERCOLOR = "red" >
<FRAME SRC - "rightframe.html"
NAME="right" <!--або "правий" тощо--> </FRAMESET>
<NOFRAME> <!--Текст, що відображатиметься у броузері, який не підтримує фреймів, наприклад:-->
Вибачте, цей сайт містить фрейми. Скористайтесь іншим броузером для його перегляду.
</NOFRAME>
</HTML>
Пояснимо дію використаних тегів та їхніх параметрів. Для поділу вікна броузера на декілька частин використову ють тег-контейнер
<FRAMESET параметри>... </FRAMESET>
Параметрів є два: COLS і ROWS. Параметр COLS приз начений для поділу вікна на вертикальні області (колонки), а ROWS - на горизонтальні. Розміри областей задають у відсот ках до всього вікна, фіксовані - у пікселях. Наприклад, COLS = "25%, 75%" означає, що лівий фрейм займатиме чверть вікна на будь-якому моніторі.
Можна писати також COLS = "1*, 3*", де 1* саме тут означає одну з чотирьох частин екрана, або COLS = "2*, З*", де 2* означає дві з п'яти вертикальних частин екрана.
У фіксованому заданні COLS = "100,*", число 100 означає 100 пікселів, а * - решту екрана.
Більш складні конфігурації фреймів створюють шляхом поділу на фрейми деякого раніше створеного фрейму. У цьому випадку теги FRAMESET вкладають один в одний, на приклад, так:
<FRAMESET COLS - "25%, 75% ">
<FRAME описуємо лівий фрейм>
<FRAMESET ROWS= "25%, 75% >
<FRAME описуємо верхній правий фрейм>
<FRAME описуємо нижній правий фрейм>
</FRAMESET>
</FRAM...
